<template>
  <div class="mian-content">
    <div class="SK-post-content">
      <a class="post-button" @click="add">发布果帖</a>
      <div class="SK-theme-block-container">
        <div class="SK-theme-block-types">
          <a class="type active">最新帖子</a>
        </div>
        <div class="SK-theme-block-content">
          <div class="SK-topics-list-container">
            <div class="SK-community-post-detail">
              <div
                class="item-wrap"
                v-for="(post, index) in contentList"
                :key="post.id"
              >
                <div class="header"><div class="btn"></div></div>
                <div class="author-info">
                  <div class="nickname">
                    <div>
                      <a class="nick_name" target="_blank" href="#">{{
                        post.username
                      }}</a>
                    </div>
                    <div class="publish-post">
                      发布了果帖<span class="time">{{
                        post.content_time
                      }}</span>
                    </div>
                  </div>
                </div>

                <h1 @click="getPostDetail(post)">{{ post.content_post }}</h1>

                <img
                  :src="post.url"
                  class="post_img"
                  style="width:100px heigth:100px"
                />
                <div class="tags"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="发布帖子" :visible.sync="dialogFormVisible">
      <el-form
        style="width: 80%"
        :model="postForm"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item prop="content_post" label="帖子内容" label-width="100px">
          <el-input
            type="textarea"
            autocomplete="off"
            v-model="postForm.content_post"
          ></el-input>
        </el-form-item>
        <el-form-item prop="url" label="帖子图片" label-width="100px">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/api/upLoadPage"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="postForm.url" :src="postForm.url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPost('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pic from "../../../assets/images/default.jpeg";
export default {
  name: "Forum",
  data() {
    return {
      userInfo: {
        name: "",
        money: 0,
        page: "",
        phone: "",
        sex: "",
        state: "",
        password: "",
      },
      postForm: {
        content_post: "",
        url: "",
      },
      pageUrl: "",
      dialogFormVisible: false,
      rules: {
        content_post: [{ required: true, message: "请输入资讯内容" }],
        url: [{ required: true, message: "请选择图片" }],
      },
    };
  },
  mounted() {
    this.getUserInfo();
    this.getPostLists();
  },
  methods: {
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    },
    async getPostLists() {
      try {
        await this.$store.dispatch("getPostList");
      } catch (error) {
        alert(error.message);
      }
    },
    add() {
      if (this.userInfo.state == 3) {
        alert("你最近有违规行为,禁止发帖!");
      } else {
        this.dialogFormVisible = true;
        // 每次点开都清空
        this.postForm = { content_post: "", url: "" };
      }
    },
    handleAvatarSuccess(res, file) {
      // res 上传成功之后返回前端数据
      // file 上传成功之后服务器返回前端数据
      this.postForm.url = URL.createObjectURL(file.raw);
      this.pageUrl = file.response.data.src;
    },
    // 图片上传之前
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isJPG2 = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      if (!isJPG && !isJPG2 && !isPNG)
        this.$message.error("请上传格式为 png, jpg, jpeg 的图片！");

      return isJPG || isJPG2 || isPNG;
    },
    // 发帖
    addPost(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          let result = await this.$store.dispatch("getPost", {
            username: this.userInfo.name,
            content_post: this.postForm.content_post,
            url: this.pageUrl,
          });
          if (result == "ok") {
            this.getPostLists();
            this.$message.success("发帖成功");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 点击帖子详情
    getPostDetail(post) {
      this.$router.push({
        path: "/postdetail",
        query: { contentid: post.id, username: this.userInfo.name },
      });
    },
  },
  computed: {
    ...mapState({
      contentList: (state) => state.community.postList,
    }),
  },
};
</script>

<style>
@import "../../../assets/css/forum.css";
</style>
